<template>
  <div py-36rpx v-if="isShow">

    <div v-if="commentInfo.length">
      <nut-comment v-for="cmt in commentInfo" :operation="[]" :images="cmt.images" :key="cmt.id" :info="{
    content: cmt.content,
    time: cmt.createTime,
    avatar: cmt.memberProfile,
    nickName: noPassByName(cmt.memberName),
    score: cmt.serviceScore
  }"  @clickImages="clickImages">
      </nut-comment>
      <div class="line"></div>
      <div flex flex-j-c mt-40rpx>
        <nut-button size="small"
          @click="$navigateTo('/pages/goods/product/comment?goodsId=' + props.id)">查看全部评价</nut-button>
      </div>
    </div>
    <div v-if="!commentInfo.length">
      <empty title="该商品暂无评论" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getGoodsComments } from '@/api/goods';
import empty from '@/components/empty/index.vue';
import { noPassByName } from '@/utils/filters';
const isShow = ref<boolean>(false)
const emit = defineEmits(['result'])

const params = {
  pageNumber: 1,
  pageSize: 10,
  grade: "",
}
const commentInfo = ref<any>('')
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})
async function fetchCommentDetail() {
  const goodsId = props.id || ''
  if (goodsId) {
    const res = await getGoodsComments(goodsId, params)
    isShow.value = true
    if (res.data.success) {

      res.data.result.records.forEach((item: any) => {

        item.images = item.images ? item.images.split(',').map((item: any) => {
          return {
            "smallImgUrl": item, // 小图，列表展示时使用
            "bigImgUrl": item, // 大图，大图展示使用
            "imgUrl": item, // 兜底图
          }
        }) : []

        console.log(item, 'itemitem')

      })

      commentInfo.value = res.data.result.records ? res.data.result.records.splice(0, 1) : []

      emit('result', res.data.result)
    }
  } else {
    isShow.value = true
  }
}

function handleclick() {

}

function clickImages(i:any) {
  uni.previewImage({
    current: 0,
    urls: [i.value.bigImgUrl],
    longPressActions: {
      itemList: ["保存图片"],
      success: function (data) { },
      fail: function (err) { },
    },
  });
}

onMounted(() => {
  fetchCommentDetail()
})
</script>

<style scoped>
.line {
  height: 2rpx;
  background-color: #f3f5f7;
}
</style>
